<template>
  <div style="margin: auto"><h1>库存信息</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="name"
        label="商品名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="genre"
        label="类别"
        width="150">
    </el-table-column>
    <el-table-column
        prop="brand"
        label="品牌"
        width="200">
    </el-table-column>
    <el-table-column
        prop="num"
        label="库存数量"
        width="150">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="findById(scope.row.number);this.findVisible=true">查看</el-button>
        <el-button type="primary" size="small" @click="findById(scope.row.number);this.updateVisible=true">修改销售价</el-button>

      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <div class="searchDiv">
    <el-row>
      <el-col :span="10">客户名称<input type="text" v-model="findObj.name"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">起始数量<input type="text" v-model="findObj.startNum"></el-col>
    </el-row>
    <el-row>

      <el-col :span="10" style="margin-top: 20px">未定销售价
        <el-select v-model="findObj.price" placeholder="请选择" :value-key="findObj.id">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click=""
          >
          </el-option>
        </el-select></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">结束数量<input type="text" v-model="findObj.endNum"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">类别
        <el-select v-model="findObj.genre" placeholder="请选择" :value-key="findObj.id" >
          <el-option
              v-for="item in genres"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        <el-option
            v-for="item in genre"
            :key="item"
            :label="item"
            :value="item"
        >
        </el-option>
      </el-select></el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="margin-top: 20px"><el-button type="primary" @click="findByItem(1)">搜索</el-button></el-col>
    </el-row>
  </div>


  <el-dialog
      v-model= "findVisible"
      title="查询商品信息"
      width="60%"
      center>
    <div style="margin-left: 100px;margin-top: 50px">
      商品编号：<input type="text" v-model="goods.number" disabled><br>
      商品名称：<input type="text" v-model="goods.name" disabled><br>
      品牌：<input type="text" v-model="goods.brand" disabled><br>
      类别：<input type="text" v-model="goods.genre" disabled><br>
      采购价：<input type="text" v-model="goods.price" disabled><br>
    </div>
    <div style="margin-left: 100px;margin-top: 50px">
      <img :src="'/project/emFace/'+goods.img" width="200" height="200"><br>
      商品图片：<br>
      采购数量:<input type="text" v-model="goods.num" disabled><br>
    建议销售价:<input type="text" v-model="goods.sellPrice" disabled><br></div>
    <el-button type="primary" @click="this.findVisible=false" style="margin-top: 30px;margin-left: 50px;size: 20px" >确定</el-button>
  </el-dialog>
  <el-dialog
      v-model= "updateVisible"
      title="修改商品信息"
      width="60%"
      center>
    <div style="margin-left: 100px;margin-top: 50px">
      商品编号：<input type="text" v-model="goods.number" disabled><br>
      商品名称：<input type="text" v-model="goods.name" disabled><br>
      品牌：<input type="text" v-model="goods.brand" disabled><br>
      类别：<input type="text" v-model="goods.genre" disabled><br>
      采购价：<input type="text" v-model="goods.price" disabled><br>
    </div>
    <div style="margin-left: 100px;margin-top: 50px">
      <img :src="'/project/emFace/'+goods.img" width="200" height="200"><br>
      商品图片：<br>
      采购数量:<input type="text" v-model="goods.num" disabled><br>
    建议销售价:<input type="text" v-model="goods.sellPrice" ><br></div>
    <el-button type="primary" @click="update" style="margin-top: 30px;margin-left: 50px;size: 20px" >确定</el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      cutObj:[],
      findObj:{
        price:0,
      },
      options: [{
        value: 0,
        label: '不限'
      }, {
        value: 2,
        label: '未定销售价'
      }, {
        value: 1,
        label: '已定销售价'
      }],
      findVisible:false,
      updateVisible:false,
      goods:{},
      genre:[],
      genres:[
        {
          value:null,
          label:'不限'
        }
      ],
    }
  },
  methods:{
    findByItem(pageNo){
      this.findObj.pageNo = pageNo;
      axios.get("/project/goods/findByItem",{params:this.findObj}).then(resp=>{
        this.cutObj = resp.data;
      });
      axios.get("/project/goods/findTypes").then(resp => {
        this.genre=resp.data;
      })
    },
    findById(number){
      axios.get("/project/goods/findById",{params:{number}}).then(resp=>{
        this.goods=resp.data;
      })
    },
    update(){
      axios.get("/project/goods/update",{params:{
          id:this.goods.number,
          sellPrice:this.goods.sellPrice

        }}).then(resp=>{
        if (resp.data=="ok"){
          this.updateVisible=false;
          this.findByItem(1);
        }
      })
    }


  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>
.searchDiv{
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 600px;
  margin-top: 40px;
}

</style>